{% extends "base.html" %}
{% block title %}{{ service.name }} | Our Services{% endblock %}

{% block additional_headers %}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{ settings.STATIC_URL }}js/jquery.beforeafter-1.4.min.js"></script>

<script src="{{ settings.STATIC_URL }}js/jquery.flexslider-min.js"></script>

{% endblock additional_headers %}

{% block page_content %}

{% block navigation %}
	{% navigation 'services' %}
{% endblock navigation %}

{% block breadcrumb %}
	{% breadcrumb 'False' 'services' service.name %}
{% endblock breadcrumb %}

<section class="container-992 content">
	{% title service.name %}
	
	{% block sidebar_related_services %}
		{% sidebar_related_services service.id %}
	{% endblock sidebar_related_services %}
	
	<section class="fl col-620">
		<article>
			<section class="flexslider">
				<ul class="slides">
					<li><img src="{{ settings.STATIC_URL }}img/gallery/test-1.jpg" alt="" width="620" height="414"/></li>
					<li><img src="{{ settings.STATIC_URL }}img/gallery/test-2.jpg" alt="" width="620" height="414"/></li>
					<li><img src="{{ settings.STATIC_URL }}img/gallery/test-3.jpg" alt="" width="620" height="414"/></li>
				</ul>
			</section>

			<nav class="pagination">
			</nav>
	
			{% if service.before_image and service.after_image %}
			
			<div class="before-after">
				<div><img src="{{ settings.MEDIA_URL }}{{ service.before_image }}" alt="before" width="620" height="414"/></div>
				<div><img src="{{ settings.MEDIA_URL}}{{ service.after_image }}" alt="after" width="620" height="414"/></div>
			</div>
			
			<nav class="fr">
				<ul>
					<li id="before-after-btn" class="services-image-btn"><a href="#before-after">View before &amp; after</a></li>
					<li id="gallery-btn" class="services-image-btn"><a href="#gallery">View gallery</a></li>
				</ul>
			</nav>
			
			{% endif %}
			
			<div class="clear"></div>
	
			<section class="service_con">
				{% if service.description %}
					<p>{{ service.description }}</p>
				{% else %}
					{% if service.category.description %}
						<p>{{ service.category.description }}</p>
					{% else %}
					<p>Description coming soon</p>
					{% endif %}
				{% endif %}
			</section>
		</article>
	</section>
	<div class="clear"></div>
</section>
{% endblock page_content %}